import React, { useState, useEffect } from "react";
import Left from "../../css/zh/icon/left.svg?react";
import { Form, Input, Space, Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import store from "../../redux";
import axios from "axios";
import "../../css/zh/login.css";
import Yx from "../../css/zh/icon/yx.svg?react";
import Dsz from "../../css/zh/icon/dsz.svg?react";
import Yj from "../../css/zh/icon/yj.svg?react";
import By from "../../css/zh/icon/by.svg?react";
import Wx from "../../css/zh/icon/Wx.svg?react";
import Zfb from "../../css/zh/icon/zfb.svg?react";
import Sjh from "../../css/zh/icon/sjh.svg?react";
// import styled from "styled-components";
const Login = () => {
  const navigate = useNavigate();
  const [tong, setTong] = useState(false);
  const [myyzm, setMyyzm] = useState("");
  const [values, setValues] = useState("");
  const [email, setEmail] = useState("");
  const [da, setDa] = useState(true);
  const [captcha, setCaptcha] = useState({ data: "", text: "" });

  const addnum = () => {
    store.dispatch({ type: "ADD", password: values, email: email });
  };
  function login() {
    axios
      .post("http://localhost:3000/zlogin", {
        email: email,
        password: values,
      })
      .then((req, res) => {
        if (req.data.code == 200) {
          store.dispatch({ type: "Lg", lemail: email });
          localStorage.setItem("token", req.data.token);
          navigate("/tar/shou");
        } else {
          Toast.show({
            icon: "fail",
            content: "账号或密码错误",
          });
        }
      });
  }
  return (
    <div class="cc">
      <p className="my_p">
        <Left className="icon-left" />
      </p>
      <h1 className="login_h1">登录到您的用户</h1>

      <div className="login_div">
        <Yx className="icon-yx"></Yx>
        <Dsz className="icon-dsz"></Dsz>
        {values.length > 0 ? (
          !da ? (
            <Yj
              onClick={() => {
                setDa(!da);
              }}
              className="icon-yj"
            ></Yj>
          ) : (
            <By onClick={() => setDa(!da)} className="icon-yj"></By>
          )
        ) : (
          ""
        )}

        <input
          onChange={(val) => {
            setEmail(val.target.value);
          }}
          type="text"
          placeholder="请输入您的邮箱"
        />
        <input
          placeholder="请输入您的密码"
          onChange={(val) => {
            setValues(val.target.value);
            if (val.target.value == "") {
              setDa(true);
            }
          }}
          type={da ? "password" : "text"}
        />
      </div>
      <p className="login_xy">
        <input
          onChange={(val) => {
            setTong(val.target.checked);
          }}
          type="checkbox"
        />
        记住密码
      </p>
      <p style={{ textAlign: "center" }}>
        <button
          onClick={() => {
            login();
          }}
          className="zc_btn"
        >
          登录
        </button>
      </p>
      <p className="zc_qt">其他登录方式</p>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <p
          onClick={() => {
            addnum();
          }}
          className="zc_h"
        >
          <Wx className="zc_wx" />
        </p>
        <p className="zc_h">
          <Zfb className="zc_wx" />
        </p>
        <p className="zc_h">
          <Sjh className="zc_wx" />
        </p>
      </div>
      <p className="qdl">
        还没有账号？{" "}
        <span
          onClick={() => {
            navigate("/zc");
          }}
          style={{ color: "#7210ff" }}
        >
          {" "}
          去注册
        </span>
      </p>
    </div>
  );
};

export default Login;
